<template>
    <div class="search-list">
        <div class="headers">
            <Header></Header>
            <ul>
                <li v-for='(item,index) in searchList.data'
                    :key='index'
                    @click='changeTab(index)'
                >
                    <div :class='searchList.currentIndex ==index? "active":"" '>{{item.name}}</div>
                    <div class="search-filter" v-if='index !=0'>
                        <i class="iconfont icon-arrow_up_fat"
                           :class='item.status ==1? "active":"" '></i>
                        <i class="iconfont icon-arrow_down_fat"
                           :class='item.status ==2? "active":"" '></i>
                    </div>
                </li>
            </ul>
        </div>
        <section ref='wrapper'>
            <div>
                <ul v-if='goodsList.length'>
                    <li v-for='(item,index) in goodsList'
                        :key='index'>
                        <img v-lazy="item.imgUrl" alt="">
                        <h3>{{item.name}}</h3>
                        <div class="price">
                            <div>
                                <span>￥</span>
                                <b>{{item.price}}</b>
                            </div>
                            <div>立即购买</div>
                        </div>
                    </li>
                </ul>
                <h1 v-else>暂无数据</h1>
            </div>
        </section>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
    import Header from "../../components/search/Header";
    import Tabbar from "../../components/common/Tabbar";
    import http from '@/common/api/request.js'
    import BetterScroll from 'better-scroll'
    export default {
        data() {
            return {
                goodsList: [],
                searchList: {
                    currentIndex: 0, //当前选择的下标值
                    data: [
                        /*
                        status: 0 都不亮
                        status: 1 上箭头亮
                         status: 2 下箭头亮
                         */
                        {name: '综合', key: 'zh'},
                        {name: '价格', status: 0, key: 'price'},
                        {name: '销量', status: 0, key: 'num'}
                    ]
                }
            }
        },
        name: "Search-list",
        //计算属性
        computed: {
            orderBy() {
                //知道当前是哪一个对象
                let obj = this.searchList.data[this.searchList.currentIndex];
                //针对于状态，判断是升序还是降序
                let val = obj.status == '1' ? 'asc' : 'desc';
                return {
                    [obj.key]: val
                }
            }
        },
        components: {Tabbar, Header},

        created() {
            this.getData();
        },
        methods: {
            getData() {

                http.$axios({
                    url: '/api/goods/shopList',
                    params: {
                        searchName: this.$route.query.key,
                        ...this.orderBy
                    }
                }).then(res => {
                    this.goodsList = res;
                    console.log(res);
                })
            },
            changeTab(index) {
                // console.log(index);
                this.searchList.currentIndex = index;
                //点击的下标对应数据的哪一个
                let item = this.searchList.data[index];
                //取消所有的状态值 ===》都变成0
                this.searchList.data.forEach((v, i) => {
                    if (i != index) {
                        v.status = 0;
                    }
                })
                //    当前点击的改变状态
                if (index == this.searchList.currentIndex) {
                    item.status = item.status == 1 ? 2 : 1;
                }
                //发送请求进行数据排序
                this.getData();
            }
        },
        watch: {
            $route() {
                this.getData();
            }
        },
        mounted(){
            console.log(this.$refs.wrapper);
            new BetterScroll(this.$refs.wrapper,{
                movable: true,
                zoom: true
            })
        }
    }
</script>

<style scoped lang='scss'>
    .search-list {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        overflow: auto;
    }

    .headers ul {
        display: flex;
        justify-content: space-around;
        padding: 20px 0;
        font-size: 16px;
    }

    .headers ul li {
        display: flex;
        align-items: center;
    }

    .headers ul li > div {
        padding: 0 3px;
    }

    .headers ul li .search-filter {
        display: flex;
        /*//上下结构*/
        flex-direction: column;
    }

    .headers ul li .search-filter i {
        height: 10px;
    }

    section{
        flex: 1;
        overflow: auto;
        margin-bottom: 1.6rem;

        div ul {
            display: flex;
            /*flex-wrap 属性指定 flex 元素单行显示还是多行显示 wrap自动换行属性后,导致两行div中间有空行*/
            flex-wrap: wrap;
            justify-content: space-between;

            li {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                width: 50%;
                padding: 10px;
            }
        }
    }

    section div ul li img {
        width: 170px;
        height: 170px;
    }

    section div ul li img[lazy=loading] {
        background-color: #f7f7f7;
    }

    section div ul li h3 {
        width: 100%;
        font-size: 14px;
        color: #222;
        font-weight: 400;
        /*超出变成...*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    section div ul li .price {
        display: flex;
        /*左右布局*/
        justify-content: space-between;
        padding: 10px 0;
        width: 100%;
        font-size: 14px;
    }

    section div ul li .price div:first-child span {
        font-size: 12px;
        color: #b0352f;
    }

    section div ul li .price div:first-child b {
        color: #b0352f;
        font-size: 16px;
    }

    section div ul li .price div:last-child {
        padding: 3px 6px;
        color: #fff;
        background-color: #b0352f;
        border-radius: 6px;
    }

    .active {
        color: red;
    }
</style>